@keyframes clockwise {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes anticlock {
  to {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg)
  }
}

.loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  z-index: 19860601;
}

.wrapper {
  position: absolute;
  width: 380px;
  height: 70px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.outer {
  position: absolute;
  width: 380px;
  height: 70px;
  -webkit-animation: clockwise 4s linear infinite;
  animation: clockwise 4s linear infinite;
}

.inner {
  position: absolute;
  width: 180px;
  height: 60px;
  left: 100px;
  top: 5px;
  -webkit-animation: anticlock 4s linear infinite;
  animation: anticlock 4s linear infinite;
}

.handle {
  position: absolute;
  width: 100%;
  height: 100%;
}

.handle:before,
.handle:after {
  content: '';
  float: left;
  width: 70px;
  height: 100%;
  border-radius: 50%;
  background: #fff;
}

.handle:after {
  float: right;
}

.inner>.handle:before,
.inner>.handle:after {
  width: 60px;
}

.rotate45 {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.rotate90 {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.rotate135 {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg)
}